<template>
    <div class="content">
      <div class="head">
        <span >科室管理</span>
      </div>
      <div class="content_main">
        <Row class="search"> 
        <Col span="2">
          <Button style="position:relative;left:10px" type="primary" @click="add">新增</Button>
        </Col>      
        <Col span="22" class="search_input">
          <div class="item">
            <label>科室名称</label>
            <Input v-model="deptName" placeholder="科室名称" style="width: 200px"></Input>
          </div>
        </Col>
          <Button type="primary" icon="ios-search" @click="initData">查询</Button>
        </Row>
        <Table class="marginTop10" stripe border :loading="loading" :columns="columns1" :data="data1"></Table>
        <Page  @on-change="handlePageChange" @on-page-size-change="handleSizeChange" :total="pager.total" :current="pager.pageNum" :page-size="pager.pageSize" show-total></Page>
        <Modal v-model="modal1" title="新增管理" @on-ok="ok" @on-cancel="cancel" cancel-text="取消" ok-text="确定">
            <Form label-position="left" :label-width="70">
              <FormItem label="科室名称">
                <Input v-model="sysDeptName" placeholder="科室名称"></Input>
              </FormItem>
              <FormItem label="科室描述">
                <Input v-model="deptIntroduce" placeholder="科室描述"></Input>
              </FormItem>
            </Form>
        </Modal>
        <Modal v-model="modal2" title="删除科室" @on-cancel="deleteCancel" @on-ok="deleteOk" cancel-text="取消" ok-text="确定">
            <p>是否确认删除科室</p>
        </Modal>
    </div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        deptName:"",
        modal1:false,
        sysDeptName:'',
        deptIntroduce:'',
        id:'',
        editOrAdd:false,
        modal2:false,
        pager: { total: 0, pageNum: 1, pageSize: 20 },
        loading: true,
        columns1: [
          {
            title: "科室名称",
            key: "deptName",
            align: "center"
          },
          {
            title: "科室描述",
            key: "deptIntroduce",
            align: "center",
          },
          {
            title: "操作",
            key: "action",
            width: 300,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                    "Button",
                    {
                    props: {
                        type: "success",
                        size: "small"
                    },
                    style: {
                        marginRight: "5px"
                    },
                    on: {
                        click: () => {
                        this.check(params.row);
                        }
                    }
                    },
                    "科室风险项"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.delete(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            }
          }
        ],
        data1: []
      };
    },
    mounted() {
      this.initData();
    },
    methods: {
        /**
       * *每页面码改变事件
       */
      handlePageChange(pageNum) {
        this.pager.pageNum = pageNum;
        this.initData();
      },
      /**
         * 每页条数改变时事件
         */
      handleSizeChange(pageSize) {
        this.pager.pageSize = pageSize;
        this.initData();
      },
      initData() {
        this.loading = true;
        this.$http.post("/api/auth/sysdept/doGetList",{
          pageNum: this.page,
          pageSize: this.pageSize,
          deptName:this.deptName,
        }).then(res => {
          this.data1 = res.retBody.list;
          this.pager.total = res.retBody.total;
          this.loading = false;
        });
      },
      /**
       * 添加科室
       */
      add() {
        //新增前清空科室名称，科室描述
        this.modal1=true;
        this.sysDeptName="";
        this.deptIntroduce="";
        this.editOrAdd = true;//等于true表示新增,false表示修改
      },
      ok(){
          //新增科室提交方法
          if(this.editOrAdd){
            this.addDept();
          }else{
            this.editDept();
          }
         
      },
      cancel() {},
      addDept(){
        const self = this;
        this.$http
        .post("/api/auth/sysdept/doSaveSysDept", { 
            deptName: this.sysDeptName, 
            deptIntroduce:this.deptIntroduce,
            })
        .then(res => {
          if (res.retHead.code == "0000000") {
            self.$Message.success({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          } else {
            self.$Message.warning({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          }
          this.initData();
        });
      },
      editDept(){
        const self = this;
        this.$http
            .post("/api/auth/sysdept/doModDept", {
            deptName: this.sysDeptName,
            id: this.id,
            deptIntroduce: this.deptIntroduce,
            })
            .then(res => {
            if (res.retHead.code == "0000000") {
                self.$Message.success({
                top: 100,
                duration: 3,
                content: res.retHead.message
                });
            } else {
                self.$Message.warning({
                top: 100,
                duration: 3,
                content: res.retHead.message
                });
            }
            this.initData();
         });
      },
      /**
       * 编辑科室
       */
      edit(row) {
        this.sysDeptName = "";
        this.deptIntroduce = "";
        this.id = row.id;
        this.sysDeptName = row.deptName;
        this.deptIntroduce = row.deptIntroduce;
        this.modal1 = true;
        this.editOrAdd = false;
      },
      /**
      * 分配科室风险项
      */
      check(row){
        this.$router.push({
          path: '/checkDeptItemAdd',
          query :{deptId:row.id}
          });
      },
      /**
       * 删除科室
       */
      delete(row) {
        this.id=row.id;
        this.modal2=true;
      },

      /**
       *确定删除
       */
      deleteOk(){
        const self = this;
        this.$http
            .post("/api/auth/sysdept/doDelDept", {
            id: this.id,
            })
            .then(res => {
            if (res.retHead.code == "0000000") {
                self.$Message.success({
                top: 100,
                duration: 3,
                content: res.retHead.message
                });
            } else {
                self.$Message.warning({
                top: 100,
                duration: 3,
                content: res.retHead.message
                });
            }
            this.initData();
         });
      },
      deleteCancel(){

      },
    }
  };
  </script>
  
  